<script setup lang="ts">
import { defineProps, ref } from "vue";
const props = defineProps<{
  name: string;
  online: boolean;
}>();
</script>


<template>
  <div class="contactLsit">
    <div class="image" :style="{ opacity: props.online ? '1' : '.5' }">
      <van-image fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" />
    </div>
    <div class="contactName">
      <span>{{ props.name }}</span>
    </div>
  </div>
</template>



<style scoped lang='scss'>
.image{
    width: 100px;
    height: 100px;
    margin: 0 20px;
}
.van-image{
    width: 100%;
    height: 100%;
}
.contactLsit{
    display: flex;
    font-size: 32px;
    height: 130px;
    align-items: center;
    background-color: var(--contac-card-bg);
    &:active{
        opacity: .6;
    }
}
.contactName{
    border-bottom: 1px  solid var(--van-gray-3);
    height: 100%;
    line-height: 130px;
    flex: 1;
    color:var(--van-black);

}

</style>